<template>
  <div>
    <el-card shadow="never" class="mb20">
      <div class="table-page-search-wrapper">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="发生时间" prop="date">
                <el-date-picker
                  style="width: 100%"
                  v-model="date"
                  type="daterange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预警规则" prop="ruleId">
                <el-select clearable v-model="form.ruleId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in selectRule"
                    :key="index"
                    :label="item.ruleName"
                    :value="item.ruleId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-tooltip class="item" effect="dark" content="查询" placement="top">
                  <el-button
                    type="primary"
                    class="mr20"
                    @click="handleSearch"
                    icon="el-icon-search"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="重置" placement="top">
                  <el-button @click="handleReset" icon="el-icon-refresh-right" />
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="never">
      <e-table
        @getList="handleGetList"
        :tableData="tableData"
        :columns="columns"
        :loading="loading"
        :total="total"
      >
        <el-table-column slot="pendingTotal" label="待审核" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.pendingTotal > 0">
              <el-button
                type="text"
                @click="haveHandle(scope.row, 'pending')"
              >{{ scope.row.pendingTotal }}</el-button>
            </template>
            <template v-else>{{ scope.row.pendingTotal }}</template>
          </template>
        </el-table-column>
        <el-table-column slot="handleTotal" label="已处置预警数" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.handleTotal > 0">
              <el-button
                type="text"
                @click="haveHandle(scope.row, 'have')"
              >{{ scope.row.handleTotal }}</el-button>
            </template>
            <template v-else>{{ scope.row.handleTotal }}</template>
          </template>
        </el-table-column>
        <el-table-column slot="notHandleTotal" label="未处置预警数" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.notHandleTotal > 0">
              <el-button
                type="text"
                @click="haveHandle(scope.row, 'not')"
              >{{ scope.row.notHandleTotal }}</el-button>
            </template>
            <template v-else>{{ scope.row.notHandleTotal }}</template>
          </template>
        </el-table-column>
        <el-table-column slot="disposalRejected" label="处置驳回" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.disposalRejected > 0">
              <el-button
                type="text"
                @click="haveHandle(scope.row, 'rejected')"
              >{{ scope.row.disposalRejected }}</el-button>
            </template>
            <template v-else>{{ scope.row.disposalRejected }}</template>
          </template>
        </el-table-column>
      </e-table>
    </el-card>
  </div>
</template>

<script>
import { summaryStatistics, warningRuleAll } from '@/api/prewarning'

export default {
  data() {
    return {
      date: null,
      selectRule: [],
      form: {
        ruleId: null
      },
      columns: [
        {
          label: '预警等级',
          formatter(row, column, cellValue, index) {
            return row.warningGrade + '级'
          }
        },
        {
          label: '预警规则',
          prop: 'ruleName'
        },
        {
          label: '预警数',
          prop: 'warningTotal'
        },
        { slot: 'pendingTotal' },
        { slot: 'handleTotal' },
        { slot: 'notHandleTotal' },
        { slot: 'disposalRejected' },
        {
          label: '处置率',
          prop: 'disposalRate'
        }
      ],
      loading: false,
      total: 1,
      tableData: [],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      row: null // 工作台传递过来的参数
    }
  },
  mounted() {
    warningRuleAll().then(res => {
      console.log('res', res)
      this.selectRule = res.data
    })
    this.handleGetList()
  },
  created() {
    // console.log('param', this.$route.params.row.ruleId)
    if (this.$route.params.row && this.$route.params.row.ruleId) {
      this.row = Object.assign({}, this.$route.params.row)
      this.haveHandle(this.row, this.row.type)
    }
  },
  methods: {
    haveHandle(row, type) {
      this.$nextTick(() => {
        this.$emit('showSecond', row, type)
      })
    },
    handleSearch() {
      console.log('form', this.form)
      if (this.date) {
        const startDate = this.date[0]
        const endDate = this.date[1]
        this.$set(this.form, 'startDate', startDate)
        this.$set(this.form, 'endDate', endDate)
      } else {
        this.$set(this.form, 'startDate', null)
        this.$set(this.form, 'endDate', null)
      }
      this.handleGetList(this.form)
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.date = null
      this.handleSearch()
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await summaryStatistics(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>